<template>
  <div class="root">
    <div class="container">
      <!-- 左边三模块 -->
      <div class="content">
        <div class="statistics">
          <!-- 工单统计 -->
          <div class="workOrder">
            <div class="header">
              <span class="title">工单统计</span>
              <span class="time">{{ start }} ~ {{ end }}</span>
            </div>

            <div class="data">
              <ul>
                <li>
                  <p class="num">{{ workOrderTotal }}</p>
                  <p class="type">工单总数 (个)</p>
                </li>

                <li>
                  <p class="num">{{ completedWorkOrder }}</p>
                  <p class="type">完成工单 (个)</p>
                </li>

                <li>
                  <p class="num">{{ runWorkOrder }}</p>
                  <p class="type">进行工单 (个)</p>
                </li>

                <li>
                  <p class="num">{{ cancelWorkOrder }}</p>
                  <p class="type">取消工单 (个)</p>
                </li>
              </ul>
            </div>
          </div>

          <!-- 销售统计 -->
          <div class="sell">
            <div class="header">
              <span class="title">销售统计</span>
              <span class="time">{{ start }} ~ {{ end }}</span>
            </div>
            <div class="data">
              <ul>
                <li>
                  <p class="num">{{ count }}</p>
                  <p class="type">订单量 (个)</p>
                </li>
                <li>
                  <p class="num">{{ (income / 100).toFixed(2) }}</p>
                  <p class="type">销售额 (元)</p>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 销售数据 -->
        <div class="sellData">
          <div class="sellNav">
            <div class="left">
              <span class="title">销售数据</span>
              <span class="time">{{ sellStart }} ~ {{ sellEnd }}</span>
            </div>

            <div class="right">
              <ul>
                <li
                  ref="week"
                  :class="{ active: flag === '周' }"
                  @click="selectTime('周')"
                >
                  周
                </li>
                <li
                  :class="{ active: flag === '月' }"
                  @click="selectTime('月')"
                >
                  月
                </li>
                <li
                  :class="{ active: flag === '年' }"
                  @click="selectTime('年')"
                >
                  年
                </li>
              </ul>
            </div>
          </div>

          <div class="chart">
            <!-- 销售额趋势图 -->
            <div ref="brokenLine" class="tendencyChart">
              <!-- 销售额趋势图 -->
            </div>

            <!--  v-if="columnarData.length === 0 ? false : true" -->
            <!-- 销售额分布 -->
            <div ref="columnar" class="distribution">
              <!-- < 销售额分布图 -->
            </div>

            <!-- <div v-else class="sellEmpty">
              <img src="https://likede2-admin.itheima.net/img/empty.87c4f71b.png">
              <p>暂无数据</p>
            </div> -->
          </div>
        </div>
      </div>

      <!-- 商品热榜 -->
      <div class="sideModule">
        <div class="head">
          <span class="title">商品热榜</span>
          <span class="time">{{ start }} ~ {{ end }}</span>
        </div>

        <div class="hotGoods">
          <ul>
            <li>
              <span class="goodBgc first">1</span>
              <span class="good">{{ hotList[0].skuName }}</span>
              <span class="count">{{ hotList[0].count }}单</span>
            </li>
            <li>
              <span class="goodBgc second">2</span>
              <span class="good">{{ hotList[1].skuName }}</span>
              <span class="count">{{ hotList[1].count }}单</span>
            </li>
            <li>
              <span class="goodBgc third">3</span>
              <span class="good">{{ hotList[2].skuName }}</span>
              <span class="count">{{ hotList[2].count }}单</span>
            </li>

            <li>
              <span class="goodBgc last">4</span>
              <span class="good">{{ hotList[3].skuName }}</span>
              <span class="count">{{ hotList[3].count }}单</span>
            </li>

            <li>
              <span class="goodBgc last">5</span>
              <span class="good">{{ hotList[4].skuName }}</span>
              <span class="count">{{ hotList[4].count }}单</span>
            </li>

            <li>
              <span class="goodBgc last">6</span>
              <span class="good">{{ hotList[5].skuName }}</span>
              <span class="count">{{ hotList[5].count }}单</span>
            </li>

            <li>
              <span class="goodBgc last">7</span>
              <span class="good">{{ hotList[6].skuName }}</span>
              <span class="count">{{ hotList[6].count }}单</span>
            </li>

            <li>
              <span class="goodBgc last">8</span>
              <span class="good">{{ hotList[7].skuName }}</span>
              <span class="count">{{ hotList[7].count }}单</span>
            </li>

            <li>
              <span class="goodBgc last">9</span>
              <span class="good">{{ hotList[8].skuName }}</span>
              <span class="count">{{ hotList[8].count }}单</span>
            </li>

            <li>
              <span class="goodBgc last">10</span>
              <span class="good">{{ hotList[9].skuName }}</span>
              <span class="count">{{ hotList[9].count }}单</span>
            </li>
          </ul>
        </div>
        <!-- 商品热榜 -->
      </div>
    </div>

    <div class="footer">
      <div class="cooperation">
        <div class="head">
          <span class="title">合作商点位数Top5</span>
          <span
            class="iconfont icon-gengduo icon"
            @click="$router.push('/pointposition/hezuoshang')"
          />
        </div>

        <div class="cooperationChart">
          <div ref="myPie" class="chart">
            <!-- 饼图 -->
          </div>

          <div class="pointCount">
            <div class="point">
              <p class="num">{{ pointTotal }}</p>
              <p class="name">点位数</p>
            </div>

            <div class="merchant">
              <p class="num">{{ cooperationTotal }}</p>
              <p class="name">合作商数</p>
            </div>

            <div class="triangle1" />
            <div class="triangle2" />
          </div>
        </div>
      </div>

      <div class="abnormal">
        <div class="head">
          <span class="title">异常设备监控</span>
          <span class="iconfont icon-gengduo icon" />
        </div>

        <div class="empty">
          <img src="https://likede2-admin.itheima.net/img/empty.87c4f71b.png" />
          <p>暂无数据</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { dateInit, currentYear, currentWeek } from '@/utils/sameMonth'
import {
  getPointTotal,
  getCooperationTotal,
  getWorkOrder,
  getPieData,
  getHotGoods,
  getSellTendency,
  getSellDistribution
} from '@/api/home'
import { getOrderTotal, getIncome } from '@/api/reconciliation'
import * as echarts from 'echarts'
export default {
  name: 'Dashboard',
  data () {
    return {
      pointTotal: 0,
      cooperationTotal: 0,
      start: 0,
      end: 0,
      count: 0,
      income: 0,
      workOrderTotal: 0,
      completedWorkOrder: 0,
      runWorkOrder: 0,
      cancelWorkOrder: 0,
      pieData: [],
      brokenLineData: [],
      columnarData: [],
      flag: '周',
      sellStart: 0,
      sellEnd: 0,
      hotList: []
    }
  },

  watch: {
    // 销售额Top5
    pieData () {
      this.pie.setOption({
        tooltip: {
          trigger: 'item',
          formatter: `{b} <br/> 总占比: {d}%`
        },
        labelLine: {
          show: true,
          lineStyle: {
            color: '#ccc'
          }
        },
        textStyle: {
          fontSize: '12px'
        },
        color: ['#85a7ff', '#99ebbd', '#ffb18b', '#c6ebff', '#becce6'],
        series: [
          {
            type: 'pie',
            radius: ['15%', '45%'],
            center: ['55%', '26%'],
            roseType: 'radius',
            data: this.pieData
          }
        ]
      })
    },

    // 销售额趋势图
    brokenLineData () {
      this.brokenLine.setOption({
        title: [
          {
            text: '销售额趋势图',
            textStyle: {
              fontSize: '16px'
            },
            left: 'center'
          },
          {
            subtext: '单位: 元',
            left: 26
          }
        ],
        grid: {
          left: 55
        },
        tooltip: {
          trigger: 'axis',
          formatter: `销售额: {c} <br/> {b}`
        },

        xAxis: {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          data: this.brokenLineData.xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: {
          data: this.brokenLineData.series,
          type: 'line',
          smooth: true,
          itemStyle: {
            normal: {
              color: '#d8807d',
              lineStyle: {
                width: 3,
                color: '#ff5757',
                shadowColor: '#ff5858',
                shadowOffsetY: 15,
                shadowBlur: 20
              }
            }
          }
        }
      })
    },

    // 销售额分布
    columnarData () {
      this.columnar.setOption({
        title: [
          {
            text: '销售额分布',
            left: 'center',
            textStyle: {
              fontSize: '16px'
            }
          },
          {
            subtext: '单位: 元',
            left: 26
          }
        ],
        tooltip: {
          trigger: 'axis',
          formatter: `销售额: {c} <br/> {b}`
        },

        xAxis: {
          type: 'category',
          data: this.columnarData.xAxis
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          left: 55
        },
        series: [
          {
            data: this.columnarData.series,
            type: 'bar',
            barWidth: 16,
            itemStyle: {
              color: '#91b0ff',
              barBorderRadius: [5, 5, 0, 0]
            }
          }
        ]
      })
    }
  },
  mounted () {
    // 初始化折线图和柱状图
    this.selectTime('周')
    console.log(this.columnarData)
  },

  async created () {
    // 获取商品热榜
    const hotGoodsList = await getHotGoods({
      start: dateInit()[0],
      end: dateInit()[1],
      topValue: 10
    })
    this.hotList = hotGoodsList.sort((a, b) => {
      return a - b
    })
    console.log(this.hotList)

    // 点位总数
    const res = await getPointTotal()
    this.pointTotal = res

    // 合作商总数
    const data = await getCooperationTotal()
    this.cooperationTotal = data

    // 获取当月时间范围
    this.start = dateInit()[0]
    this.end = dateInit()[1]

    // 获取本周时间范围
    this.sellStart = currentWeek()[0]
    this.sellEnd = currentWeek()[1]
    // 当月销售量
    const orderCountStatistics = await getOrderTotal({
      start: `${this.start} 00:00:00`,
      end: `${this.end} 23:59:59`
    })
    this.count = orderCountStatistics

    // 当月销售额
    const orderTotalMoneyStatistics = await getIncome({
      start: `${this.start} 00:00:00`,
      end: `${this.end} 23:59:59`
    })
    this.income = orderTotalMoneyStatistics

    // 工单统计
    const result = await getWorkOrder({
      start: `${this.start} 00:00:00`,
      end: `${this.end} 23:59:59`
    })
    // 工单总数
    this.workOrderTotal = result.reduce((prev, item) => {
      return prev + item.total
    }, 0)

    // 完成工单
    this.completedWorkOrder = result.reduce((prev, item) => {
      return prev + item.completedTotal
    }, 0)

    // 进行工单
    this.runWorkOrder = result.reduce((prev, item) => {
      return prev + item.progressTotal
    }, 0)

    // 取消工单
    this.cancelWorkOrder = result.reduce((prev, item) => {
      return prev + item.cancelTotal
    }, 0)

    // 合作商点位数Top5
    const value = await getPieData()
    this.pieData = value
  },

  updated () {
    // 合作商点位数Top5
    this.pie = echarts.init(this.$refs.myPie)
    // 销售额趋势图
    this.brokenLine = echarts.init(this.$refs.brokenLine)
    // 销售额分布
    this.columnar = echarts.init(this.$refs.columnar)
  },
  methods: {
    async selectTime (value) {
      this.flag = value
      if (value === '年') {
        this.sellStart = currentYear()[0]
        this.sellEnd = currentYear()[1]

        // 年的销售额趋势图数据
        const y = await getSellTendency({
          collectType: 2,
          start: this.sellStart,
          end: this.sellEnd
        })
        y.series.forEach((item, index, array) => {
          array[index] = array[index] / 100
        })

        y.xAxis.forEach((item, index, array) => {
          array[index] = array[index].replace('-', '年') + '月'
          array[index] = array[index].split('')
          array[index].splice(5, 1)
          array[index] = array[index].join('')
        })
        this.brokenLineData = y

        // 年的销售额分布
        const yy = await getSellDistribution({
          start: this.sellStart,
          end: this.sellEnd
        })
        yy.series.forEach((item, index, array) => {
          array[index] = array[index] / 100
        })
        this.columnarData = yy
      } else if (value === '月') {
        this.sellStart = dateInit()[0]
        this.sellEnd = dateInit()[1]
        // 月的销售额趋势图数据
        const m = await getSellTendency({
          collectType: 1,
          start: this.sellStart,
          end: this.sellEnd
        })
        console.log(m)
        m.series.forEach((item, index, array) => {
          array[index] = array[index] / 100
        })

        m.xAxis.forEach((item, index, array) => {
          array[index] = array[index].substr(6, 5).replace('-', '月') + '日'
          const i = array[index].substr(2, 1)
          if (i === '0') {
            array[index] = array[index].replace('0', '')
          }
        })
        this.brokenLineData = m

        // 月的销售额分布
        const mm = await getSellDistribution({
          start: this.sellStart,
          end: this.sellEnd
        })
        mm.series.forEach((item, index, array) => {
          array[index] = array[index] / 100
        })
        this.columnarData = mm
      } else {
        // 周的销售额趋势图数据
        this.sellStart = currentWeek()[0]
        this.sellEnd = currentWeek()[1]
        console.log(this.sellStart, this.sellEnd)
        const w = await getSellTendency({
          collectType: 1,
          start: this.sellStart,
          end: this.sellEnd
        })
        w.series.forEach((item, index, array) => {
          array[index] = array[index] / 100
        })
        const week = [
          '星期一',
          '星期二',
          '星期三',
          '星期四',
          '星期五',
          '星期六',
          '星期日'
        ]
        w.xAxis.forEach((item, index, array) => {
          array[index] = week[index]
        })
        this.brokenLineData = w

        // 周的销售额分布
        const ww = await getSellDistribution({
          start: this.sellStart,
          end: this.sellEnd
        })
        ww.series.forEach((item, index, array) => {
          array[index] = array[index] / 100
        })
        this.columnarData = ww
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.active{
   width: 44px;
   height: 26px;
   font-size: 20px;
   text-align: center;
   line-height: 26px;
   border-radius: 8px;
   color: #000 !important;
   font-weight: 700;
   background-color: #fff;
}
*{
  margin: 0;
  padding: 0;
}
ul{
  list-style: none;
}

.sellEmpty{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 140px;
      margin-top: 60px;
      p{
        margin-top: 25px;
        color: rgb(32, 35, 42);
        font-size: 14px;

    }
}
.root{
  background-color: #f8fafd;
  padding: 20px;
  .icon{
    font-size: 18px;
    color:  #6387ff;
    cursor: pointer;
  }
  .title{
      font-size: 16px;
      font-weight: 600;
      color: rgb(51,51,51)
    }
  .container{
    display: flex;
    justify-content: space-between;
    width: 100%;

    .time{
      margin-left: 10px;
      font-size: 12px;
      font-weight: 400;
      color: rgb(153,153 ,153);
    }

    .content{
      width: 75%;
      margin-right: 20px;
       .statistics{
        width: 100%;
        display: flex;
        justify-content: space-between;
        .workOrder{
          width: 56%;
          height: 150px;
          margin-right: 20px;
          border-radius: 20px;
          background: url() 0px 0px no-repeat,url(https://likede2-admin.itheima.net/img/task.66b715b7.png) calc(100% - 12px) 100% no-repeat rgb(233, 243, 255);
          .data{
            margin-left: -30px;
          }

        }
        .sell{
          width: 45%;
          height: 150px;
          border-radius: 20px;
          background: url(https://likede2-admin.itheima.net/img/sale.606b0d8c.png) calc(100% - 12px) 100% no-repeat rgb(251, 239, 232);
          .num{
           color: #ff5757 !important;
           text-shadow: 2px 4px 7px rgba(255,99,85,.5) !important;
      }
      .type{
        color: #de9690 !important;
      }
        }

        .workOrder,
        .sell{
          padding: 20px;
          .data{
          margin-top: 30px;
      ul{
        display: flex;
        justify-content: space-around;
        li{
          display: flex;
          flex-direction: column;
          align-items: center;
          .num{
            font-size: 36px;
            font-weight: 600;
            color: #072074;
            text-shadow: 2px 4px 7px rgba(85,132,255,5);
            margin-bottom: 10px;
          }
          .type{
            font-size: 12px;
            font-weight: 400;
            color: #91a7dc;
          }
        }
      }
    }
        }
       }

       .sellData{
        width: 100%;
        height: 380px;
       border-radius: 20px;
       margin-top: 20px;
        background-color: #fff;
        .chart{
          display: flex;

          .tendencyChart,
          .distribution{
            width: 480px;
            height: 280px;
            margin-top: 20px;
            background-color: #fff;
          }
    .tendencyChart{
       margin-left: 30px;
    }
        }
        .sellNav{
          display: flex;
          justify-content: space-between;
          padding: 20px;
          .right{
            width: 160px;
            height: 36px;
            border-radius: 10px;
            line-height: 36px;
            background-color: #f7fbff;
            ul{
              display: flex;
              justify-content: center;
              align-items: center;
              list-style: none;
              li{
                cursor: pointer;
                margin: 2px 12px;
                color: #9ca3b4;
                font-size: 14px;
              }
            }
          }
        }
       }
    }

    // 商品热榜
    .sideModule{
      width: 25%;
      height: 550px;
      border-radius: 20px;
      background-color: #fff;
      .head{
        height: 26px;
        padding: 20px;
      }

      .hotGoods{
        padding: 0 30px;
        ul{
          li{
            display: flex;
            margin: 28px 0;
            .goodBgc{
              width: 21px;
              height: 20px;
              font-size: 12px;
              line-height: 14px;
              text-align: center;
              color: #8e5900;
              margin-right: 24px;
            }
            .first{
              background: url();
            }
            .second{
              color: #494949 !important;
              background: url();
            }
            .third{
              color: #cf6d3d !important;
              background: url();
            }

            .last{
              color: #e9b499 !important;
              background: url();
            }

            .good{
              height: 20px;
              line-height: 20px;
              font-size: 14px;
              font-weight: 500;
              color: #333;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .count{
              position: absolute;
              right: 46px;
              height: 20px;
              line-height: 20px;
              color: #737589;
              font-weight: 400;
              font-size: 14px;
            }
          }
        }
      }
    }
  }

  .footer{
    display: flex;
    height: 340px;
    width: 100%;
    margin-top: 20px;
    .chart{
      width: 520px;
      height: 420px;
      padding-left: 50px;
    }
    .head{
      display: flex;
      justify-content: space-between;
    }
   .cooperation{
     width: 60%;
    border-radius: 20px;
    margin-right: 20px;
    padding: 20px;
    background-color: #fff;
    .cooperationChart{
      display: flex;
      margin-top: 40px;
      margin-left: -70px;
      .pointCount{
        position: relative;
        width: 154px;
        height: 230px;
        background-color: #f8f8f9;
        padding-left: 38px;
        padding-top: 47px;
        margin-left: 90px;

        .triangle1,
        .triangle2{
          width: 0;
          height: 0;
          border: 16px solid transparent;
          border-top-color: #fff;
        }

        .triangle1{
          position: absolute;
          top: -16px;
          right: -16px;
          transform: rotate(225deg);
        }
        .triangle2{
          position: absolute;
          bottom: -16px;
          left: -16px;
          transform: rotate(45deg);
        }
        .merchant{
          margin-top: 20px;
        }
        .num{
          height: 33px;
          line-height: 33px;
          font-size: 24px;
          font-weight: 600;
          color: #072074;
        }
        .name{
          height: 17px;
          line-height: 17px;
          margin-top: 6px;
          font-size: 12px;
          font-weight: 400;
          color: #000412;
        }
      }
    }
   }

   .abnormal{
    width: 40%;
    height: 340px;
    border-radius: 20px;
    padding: 20px;
    background-color: #fff;
    .empty{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 70px;
      p{
        margin-top: 25px;
        color: rgb(32, 35, 42);
        font-size: 14px;
      }
    }
   }

  }
}
</style>
